<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/jquery.min.js"></script>
		<script src="./js/layui/layui.js"></script>
		<link rel="stylesheet" href="js/layui/css/layui.css" media="all"/>
		<style>
			.content{
				width: 1500px;
				height: 300px;
				border: 1px solid red;
				display: flex;
				justify-content: space-around;
				position: relative;
			}
			.item{
				width: 15%;
				height: 300px;
				border: 1px solid black;
			}
		
			.item1{
				background:url(./img/cat.jpg) 50% 50%;
			}
			/* 放大 */
			   @keyframes enlarge {
			     from {width: 15%;}
			     to {width: 30%;}
			     
			   }
			   /* 缩小 */
			   @keyframes narrow {
			     from {width: 30%;}
			     to {width: 15%;}
			     
			   }
			.enlarge{
				animation-name: enlarge;
				 animation-duration: 2s;
				   animation-fill-mode: forwards;
			}
			.narrow{
				animation-name: narrow;
				animation-duration: 2s;
			}
		</style>
	</head>
	<body>
		
	<div class="content">
	<div class="item item1"></div>
	<div class="item item2 ">2</div>
	<div class="item item3">3</div>
	<div class="item item4 ">4</div>
	<div class="item item5">5</div>
	</div>
	
		
		
		
		<script>
			$(function(){
			$(".item").hover(function(){
				
				$(this).siblings().removeClass("enlarge")
				$(this).siblings().addClass("narrow")
				$(this).addClass("enlarge")
				$(this).removeClass("narrow")
			
			
			},function(){
			
			})
				
			})
		</script>
	</body>
</html>
